<template>
  <div class="page-container-padding">
    <!-- 查询条件 -->
    <div>
      <el-select v-model="active" size="mini">
        <el-option value="0" label="全部" />
        <el-option value="1" label="有效" />
        <el-option value="-1" label="无效" />
      </el-select>
      <el-button
        style="margin-left: 6px"
        type="primary"
        size="mini"
        :loading="dataLoading"
        @click="getInfos"
      >
        查询
      </el-button>
      <el-button
        style="margin-left: 6px"
        size="mini"
        :loading="dataLoading"
        @click="toExportFile"
      >
        导出Excel
      </el-button>
    </div>
    <!-- 表格显示 -->
    <div style="margin-top: 8px">
      <el-table border stripe :data="infoList">
        <el-table-column prop="admin_name" label="姓名" width="85px" />
        <el-table-column prop="phone" label="联系电话" width="120px" />
        <el-table-column prop="join_date" label="入司日期" width="100px" />
        <el-table-column
          prop="certificate1_date"
          label="从业证通过日"
          width="110px"
        />
        <el-table-column
          prop="certificate2_date"
          label="咨询证通过日"
          width="110px"
        />
        <el-table-column prop="join_duration" label="入司年限" width="130px" />
        <el-table-column prop="school" label="毕业院校" show-overflow-tooltip />
        <el-table-column
          prop="qualification"
          label="学历学位"
          show-overflow-tooltip
        />
        <el-table-column
          prop="office_location"
          label="办公地点"
          show-overflow-tooltip
        />
        <el-table-column prop="department" label="部门" show-overflow-tooltip />
        <el-table-column prop="group_name" label="小组" show-overflow-tooltip />
        <el-table-column
          prop="position_name"
          label="职位"
          show-overflow-tooltip
        />
        <el-table-column
          prop="work_area"
          label="负责领域"
          show-overflow-tooltip
        />
        <el-table-column label="资格证书" width="100px">
          <template #default="scope">
            <el-popover
              v-if="scope.row.certificate && scope.row.certificate.length > 0"
              trigger="hover"
              placement="top"
            >
              <p v-for="cft in scope.row.certificate" :key="cft.date">
                {{ cft.date }} {{ cft.name }}
              </p>
              <div slot="reference" style="color: #40a9ff; cursor: pointer">
                证书列表
              </div>
            </el-popover>
            <div v-else>无</div>
          </template>
        </el-table-column>
        <el-table-column label="获奖情况" width="100px">
          <template #default="scope">
            <el-popover
              v-if="scope.row.prizes && scope.row.prizes.length > 0"
              trigger="hover"
              placement="top"
            >
              <p v-for="cft in scope.row.prizes" :key="cft.date">
                {{ cft.date }} {{ cft.name }}
              </p>
              <div slot="reference" style="color: #e6a23c; cursor: pointer">
                获奖情况
              </div>
            </el-popover>
            <div v-else>无</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import { GetRoleUserInfos } from '@/api/systemManage/userInfo'
  export default {
    data() {
      return {
        pageRole: 247, // 公募基金
        active: '0',
        infoList: [],
        dataLoading: false,
      }
    },
    mounted() {
      this.getInfos()
    },
    methods: {
      getInfos() {
        this.dataLoading = true
        GetRoleUserInfos(this.pageRole, this.active).then((res) => {
          this.infoList = res.data
          this.dataLoading = false
        })
      },

      toExportFile() {
        this.dataLoading = true
        GetRoleUserInfos(this.pageRole, this.active, 1).then((res) => {
          let a = document.createElement('a')
          a.href = res.data.file_url
          a.style.display = 'none'
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
          this.dataLoading = false
        })
      },
    },
  }
</script>
<style scoped lang="scss"></style>
